<template>
	<view class="container">
		<cu-custom isBack isFixed :scrollColor="scrollColor"></cu-custom>
		<view class="banner-bg" :style="{ paddingTop: CustomBar + 'px' }">
			<view class="page-title">修改信息</view>
		</view>
		<form class="form" @submit="submit">
			<view class="form-group">
				<view class="title">昵称</view>
				<view class="form-group-input">
					<input type="number" name="mobile" value="18814131677">
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<view class="form-group">
				<view class="title">性别</view>
				<radio-group name="gender">
					<label class="form-radio__wrapper">
						<radio value="0" :checked="gender=='0'"/>
						<text>男</text>
					</label>
					<label class="form-radio__wrapper">
						<radio value="1" :checked="gender=='1'"/>
						<text>女</text>
					</label>
				</radio-group>
			</view>
			<view class="form-group">
				<view class="title">城市</view>
				<picker mode="selector" name="city" :range="cityList"
					:value="currentCity" @change="handlerCityChange">
					<view class="form-group-picker">
						{{cityList[currentCity]||'请选择城市'}}
					</view>
				</picker>
			</view>
			<view class="flex flex-direction padding align-center">
				<button class="info-btn cu-btn lg bg-green round" form-type="submit">确定</button>
				<button class="info-btn cu-btn lg line-green round" @tap="logout">退出账号</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				scrollColor: 'rgba(255, 255, 255, 0)',
				gender: '1',
				cityList: ['北京', '上海', '天津', '广州', '福州', '海南'],
				currentCity: -1
			}
		},
		methods: {
			handlerCityChange(e) {
				this.currentCity = Number(e.detail.value)
			},
			submit(e) {
				console.log(e)
			},
			logout() {
				return this.$tools.msg("还没做完")
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			let opacity = (scrollTop/100)>1?1:(scrollTop/100)
			this.scrollColor = `rgba(255, 255, 255, ${opacity})`
		}
	}
</script>

<style scoped>
	.banner-bg {
		position: relative;
		background-color: rgb(0, 123, 70);
		height: 320rpx;
		border-radius: 0 0 20rpx 20rpx;
		box-sizing: content-box;
	}
	.page-title {
		position: absolute;
		bottom: 60rpx;
		left: 30rpx;
		font-size: 52rpx;
		color: #fff;
	}
	.form {
		display: block;
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;
	}
	.form .form-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		font-size: 32rpx;
	}
	.form .form-group .form-group-input {
		display: flex;
		justify-content: flex-end;
		text-align: right;
	}
	.form-radio__wrapper {
		margin-left: 26rpx;
	}
	.form-radio__wrapper>text {
		margin-left: 10rpx;
		vertical-align: baseline;
	}
	
	/deep/uni-radio .uni-radio-input,radio .wx-radio-input {
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
	}
	/deep/uni-radio .uni-radio-input.uni-radio-input-checked, radio .wx-radio-input.wx-radio-input-checked {
		border-color: #0c8250 !important;
		background: #0c8250 !important;
	}
	/deep/uni-radio .uni-radio-input.uni-radio-input-checked::before, 
	radio .wx-radio-input.wx-radio-input-checked::before {
		font-size: 28rpx;
		transform: translate(-50%,-50%) scale(.7);
		-webkit-transform: translate(-50%,-50%) scale(.7);
	}
	/deep/uni-radio::before, uni-checkbox::before,
	radio::before, checkbox::before {
		margin-top: -6px;
		right: 2px;
	}
	.info-btn {
		margin-top: 40rpx;
		width: 64%;
	}
</style>